<template>
  <div id="app">
    <!-- TODO: 使用过渡组件是一次有趣的尝试 -->
    <transition name="fade">
      <!-- 使用keep-alive缓存组件 -->
      <keep-alive exclude="Detail">
        <router-view />
      </keep-alive>
    </transition>

    <!-- 需要在详情页隐藏tabbar -->
    <main-tab-bar v-if="this.$route.meta.showTabBar" />
  </div>
</template>
<script>
import MainTabBar from 'components/content/MainTabbar/MainTabBar.vue'

export default {
  name: 'app',
  components: {
    MainTabBar
  }
}
</script>

<style>
@import url("assets/css/base.css");
/* 过渡组件的样式 ): */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
